<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <title>博雅诗词-管理员登录</title>
        <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
        <link rel="stylesheet" href="/bootstrap/css/bootstrap.css" crossorigin="anonymous">

        <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
        <link rel="stylesheet" href="/bootstrap/css/bootstrap-theme.css" crossorigin="anonymous">

        <script src="/js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
        <script src="/bootstrap/js/bootstrap.js" crossorigin="anonymous"></script>
        <link rel="stylesheet" th:href="@{/css/poem.css}">
    </head>
    <body>
        <!-- 导航 -->
        <nav class="navbar navbar-inverse navbar-fix-top" role="navigation">
            <div class="container" th:replace="fragments/header::header">
            </div>
        </nav>

        <div class="container">
            <div class="blog-header">
                <h1 class="blog-title">博雅古诗词</h1>
                <p class="lead blog-description">带你穿越时空，与诗仙一起吟诗作赋。</p>
            </div>
            <div class="container" style="max-width: 500px;">
                <h1>登录
                <small>没有账号？<a th:href="@{/admin/signup}">注册</a></small>
                </h1>
                <form th:action="@{/admin/login}" method="post">
                    <div class="form-group">
                        <label for="username">用户名/手机/邮箱</label>
                        <input type="text" id="username" name="username" class="form-control">
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input type="password" id="password" name="password" class="form-control">
                    </div>

                    <div class="form-group">
                        <span class="input-group-btn">
                        <img id="vcode-img" alt="验证码" class="img-thumbnail">
                        </span>
                        <label for="verifycode">验证码</label>
                        <input type="text" id="verifycode" name="verifycode" class="form-control" placeholder="请输入验证码">
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary btn-block">登录</button>
                    </div>
                    <div class="alert alert-danger" th:if="${msg}!=null" th:text="${msg}" role="alert"></div>
                    <div class="form-group">
                        <a th:href="@{/admin/signup}">如果没有注册</a>
                    </div>
                </form>
            </div>
        </div>
        <div th:replace="fragments/footer::footer"></div>
        <script>
            $(function () {
                $("#vcode-img").on('click',function() {
                    console.log("change v-code...")
                    $(this).attr('src', ('/verificationCode?').replace('//', '/') + Math.floor(Math.random() * 100));
                });
            });

            window.onload=function(){
                $("#vcode-img").click();
            }
        </script>
    </body>
</html>
